<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- STYLESHEETS -->
	<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
	<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
	<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
	<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- SELECT2 -->
	<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
	<!-- UNIFORM -->
	<link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
	<!-- datatable -->
	<link rel="stylesheet" href="../../js/datatables/datatable.css">
	<link rel="stylesheet" href="../../js/datepicker/datepicker.css">

</head>

<body>
	<header class="navbar clearfix" id="header">
	</header>

	<!-- PAGE -->
	<section id="page">
		<!-- SIDEBAR -->
		<div id="sidebar" class="sidebar">
			<div class="sidebar-menu nav-collapse">

				<!-- SIDEBAR MENU -->
				<ul>
				</ul>
			</div>


		</div>
		<!-- /SIDEBAR -->
		<div id="main-content">

			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- STYLER -->

									<!-- /STYLER -->
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li>
											<i class="fa fa-home"></i>
											<a href="index.html">首页</a>
										</li>
										<li>
											<a href="#">客服管理</a>
										</li>
										<li>用户数统计</li>
									</ul>
									<!-- /BREADCRUMBS -->

								</div>
							</div>
						</div>
						<!-- /PAGE HEADER -->

						<div class="row">
							<!-- TABLES -->
							<div class="col-md-12">
								<!-- BOX -->
								<div class="box border primary">
									<div class="box-title">
										<h4><i class="fa fa-table"></i>记录数：<span id="total"></span>条
											<span style="padding-left: 20px;">今日接待用户数：
											<a id="todayReport" class="btn-show" datetime="" array="" href="javascript:void(0);" style="color: white">0</a>
											</span>
										</h4>

									</div>
									<div class="box-body">
										<table id="db_report_list" cellpadding="0" cellspacing="0" border="0"
											class="datatable table table-striped table-bordered table-hover">

										</table>
									</div>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /TABLES -->


						<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
						</div>
					</div><!-- /CONTENT-->
				</div>
			</div>
		</div>
		<div class="modal fade" id="receive-box" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">日期:<span id="date-time"></span></h4>
					</div>
					<div class="modal-body">
						<table
							style="table-layout: fixed; word-break: break-all; overflow-wrap: break-word; margin-left: 0px; width: 100%;"
							class="datatable table table-striped table-bordered table-hover dataTable no-footer"
							role="grid" cellspacing="0" cellpadding="0" border="0">
							<thead>
								<tr role="row">
									<th class="sorting_disabled" rowspan="1" colspan="1">客服姓名</th>
									<th class="sorting_disabled " rowspan="1" colspan="1">接待用户数</th>
								</tr>
							</thead>
							<tbody id="tbody">

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--/PAGE -->
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	<script src="../../js/jquery/jquery-2.0.3.min.js"></script>

	<!-- BOOTSTRAP -->
	<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- spinner -->
	<script src="../../js/spinner/spin.js"></script>
	<!-- AUTOSIZE -->
	<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
	<!-- DATA TABLES -->
	<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
	<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
	<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
	<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
	<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
	<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
	<!-- SELECT2 -->
	<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
	<!-- UNIFORM -->
	<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="../../js/script.js"></script>
	<script src="../../js/common.js"></script>
	<script>
		var ip = 'http://172.17.254.201:8084/';
		if (window.location.host === "houtai.yiigoo.com")
			ip = "http://chatapi.yiigoo.com/";
		var Report = function () {
			var $mainDataTable = null;

			var searchData = function () {
				var url = ip + "chat/report/userReport.do";
				if ($mainDataTable) {
					$mainDataTable.api().ajax.url(url).load();
					return;
				}
				var dtSetting = $.dataTableSetting({
					"ajaxSource": url,
					"serverSide": true,
					"bFilter": false,// 去掉搜索框
					"bLengthChange": true,// 每页显示数量							
					"sScrollX": "100%",
					"sScrollXInner": "100%",
					"dataType": "jsonp",
					"iDisplayLength": 15,

					"bSort": false,
					"aoColumns": [{
						"mDataProp": "reportDate",
						"sTitle": "日期",
						"width": "10%",
						"render": function (data, type, row) {
							return "<a class='btn-show' datetime='" + new Date(row.reportDate).format("yyyy-MM-dd") + "' array='" + JSON.stringify(row.detailList) + "' href='javascript:void(0);'>" + new Date(row.reportDate).format("yyyy-MM-dd") + "</a>";
						}
					},
					{
						"mDataProp": "userCount",
						"sTitle": "接待用户数",
						"width": "10%",
						"class": "format_number"
					}
					]

				});

				$mainDataTable = $("#db_report_list").dataTable(dtSetting);
			};
			var todayReport = function() {
                $('#todayReport').attr('datetime', new Date().format("yyyy-MM-dd"));
                $.ajax({
                    type: "get",
                    url: ip+"chat/report/userReportToday.do",
                    async: true,
                    dataType:"jsonp",
                    success: function(result) {
                        var data = result.extra;
                        if (data) {
                            $('#todayReport').html(data.userCount);
                            $('#todayReport').attr('array', JSON.stringify(data.detailList));
						} else {
							$('#todayReport').html(0);
                            $('#todayReport').attr('array', '');
						}
                    }
                });
			};
			return {
				init: function () {
					searchData();
					todayReport();
					$("body").on('click', '.btn-show', function () {
						var data = $(this).attr('array')
						data = JSON.parse(data)
						var dateTime = $(this).attr('datetime')
						$('#date-time').html(dateTime)
						if (data) {
							$("#tbody").empty();
							$.each(data, function (index, item) {
								console.log(item)
								var tr = "<tr><td>" + item.customerName + "</td><td>" + item.userCount + "</td></tr>"
								$("#tbody").append(tr)
							});
						} else {
							$("#tbody").append("<tr><td colspan=2 style='text-align:center'>没有数据</td></tr>");
						}
						$('#receive-box').modal('show')
					})
				}
			}
		}();

		$(function () {
			$("#header").load("../head.html");
			App.init(); //Initialise plugins and elements	 
			Report.init();
		});
	</script>
	<!-- /JAVASCRIPTS -->
</body>

</html>